<template>
  <div>
    <a-form :form="form" style="max-width: 500px; margin: 40px auto 0;">
      <a-alert
        :closable="false"
        message="绑定手机号用于用户登录、找回密码、接收通知短信等。"
        style="margin-bottom: 24px;"
      />
      <a-form-item
        label="绑定手机号"
        :labelCol="{span: 5}"
        :wrapperCol="{span: 19}"
        class="stepFormText"
      >
        {{param.mobile}}
      </a-form-item>
      <a-form-item
        label="短信验证码"
        :labelCol="{span: 5}"
        :wrapperCol="{span: 19}"
      >
        <a-input v-decorator="['smscode', validatorRules.smscode]" size="large" type="text" placeholder="请输入短信验证码" />
      </a-form-item>
      <a-form-item>
        <a style="float:right;" @click="prevStep">上一步</a>
      </a-form-item>
      <a-form-item :wrapperCol="{span: 19, offset: 5}">
        <a-button size="large" type="primary" style="width:100%;" @click="nextStep">提交</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
  import { putAction } from '@/api/manage'
  
  export default {
    name: "Step2",
    props: {
      param: {
        type: Object,
        default: () => { return {} },
        required: false
      }
    },
    data () {
      return {
        loading: false,
        form: this.$form.createForm(this),
        validatorRules: {
          smscode: {
            rules: [{
              required: true,
              message: '请输入短信验证码!'
            }]
          }
        }
      }
    },
    methods: {
      nextStep () {
        let that = this
        that.loading = true
        this.form.validateFields((err, values) => {
          const smsParams = {}
          if (!err) {
            smsParams.phone = this.param.mobile
            smsParams.smscode = values.smscode
            putAction("/sys/user/updateMobile", smsParams).then(res => {
              that.loading = false
              if (res.success) {
                that.$emit('nextStep', {mobile: this.param.mobile})
              } else {
                that.cmsFailed(res.message)
              }
            })
          }
        })
      },
      prevStep () {
        this.$emit('prevStep', {mobile: this.param.mobile})
      },
      cmsFailed(err) {
        this.$notification['error']({
          message: "验证码验证失败",
          description: err,
          duration: 4,
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .stepFormText {
    margin-bottom: 24px;

    .ant-form-item-label,
    .ant-form-item-control {
      line-height: 22px;
    }
  }

</style>